<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>水里捞</title>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet" />
	<link href="css/templatemo-style.css" rel="stylesheet" />
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript" src="data/guodi.json"></script>
	<script type="text/javascript" src="data/shuancai.json"></script>
	<script type="text/javascript" src="data/xiaochi.json"></script>
</head>

<body>
	<div class="container">
		<div class="placeholder">
			<div class="parallax-window">
				<div class="tm-header">
					<div class="row tm-header-inner">
						<div class="col-md-6 col-12">
							<img src="img/logo.png" alt="Logo" class="tm-site-logo" />
							<div class="tm-site-text-box">
								<h1 class="tm-site-title">水里捞餐厅</h1>
								<h6 class="tm-site-description">创造欢乐火锅时光</h6>
							</div>
						</div>
						<nav class="col-md-6 col-12 tm-nav">
							<ul class="tm-nav-ul">
								<li class="tm-nav-li"><a href="index.html" class="tm-nav-link active">主页</a></li>
								<li class="tm-nav-li"><a href="about.html" class="tm-nav-link">关于我们</a></li>
								<li class="tm-nav-li"><a href="contact.html" class="tm-nav-link">水里捞会员</a></li>
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</div>
		<main>
			<header class="row tm-welcome-section">
				<h2 class="col-12 text-center tm-section-title"><i class="h2i"></i>欢迎来到水里捞餐厅</h2>
				<p class="col-12 text-center">
					通过精心挑选的产品和创新的服务，创造欢乐火锅时光，向世界各国美食爱好者传递健康火锅饮食文化。作为业务涉及全球的大型连锁餐饮企业，海底捞秉承诚信经营的理念，以提升食品质量的稳定性和安全性为前提条件，
					为广大消费者提供更贴心的服务，更健康、更安全、更营养和更放心的食品。</p>
			</header>
			<a name="fenye"></a>
			<div class="tm-paging-links">
				<nav>
					<ul>
						<li class="tm-paging-item"><a href="#" class="tm-paging-link active">锅底</a></li>
						<li class="tm-paging-item"><a href="#" class="tm-paging-link">涮菜</a></li>
						<li class="tm-paging-item"><a href="#" class="tm-paging-link">小吃甜品</a></li>
					</ul>
				</nav>
			</div>

			<!-- 菜单 -->
			<div class="row tm-gallery">
				<!-- page 1 -->
				<div id="tm-gallery-page-锅底" class="tm-gallery-page">
					<article class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item" v-for="item in guodi">
						<figure>
							<img :src="item.image" alt="Image" class="img-fluid tm-gallery-img" />
							<figcaption>
								<h4 class="tm-gallery-title">{{item.name}}</h4>
								<p class="tm-gallery-description">{{item.way}}</p>
								<!-- <p class="tm-gallery-price"></p> -->
							</figcaption>
						</figure>
					</article>
				</div> <!-- page 1 -->
				<!--page 2 -->
				<div id="tm-gallery-page-涮菜" class="tm-gallery-page hidden">
					<article class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item" v-for="item in dataShow">
						<figure>
							<img :src="item.image" alt="Image" class="img-fluid tm-gallery-img" />
							<figcaption>
								<h4 class="tm-gallery-title">{{item.name}}</h4>
								<p class="tm-gallery-description">{{item.way}}</p>
							</figcaption>
						</figure>
					</article>
					<!-- 分页实现。 -->
					<nav aria-label="Page navigation" class="navcenter">
						<ul class="pagination">
							<li>
								<a href="#fenye" aria-label="Previous" v-on:click="prePage">
									<span aria-hidden="true">&laquo;</span>
								</a>
							</li>
							<li v-for="(item,index) in totalPage"><a href="#fenye" @click="pickPage($event)">{{index+1}}</a>
							</li>
							<li>
								<a href="#fenye" aria-label="Next" v-on:click="nextPage">
									<span aria-hidden="true">&raquo;</span>
								</a>
							</li>
						</ul>
					</nav>
				</div> <!-- page 2 -->

				<!-- page 3 -->
				<div id="tm-gallery-page-小吃甜品" class="tm-gallery-page hidden">
					<article class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item" v-for="item in tiandian">
						<figure>
							<img :src="item.image" alt="Image" class="img-fluid tm-gallery-img" />
							<figcaption>
								<h4 class="tm-gallery-title">{{item.name}}</h4>
								<p class="tm-gallery-description">{{item.way}}</p>
								<!-- <p class="tm-gallery-price"></p> -->
							</figcaption>
						</figure>
					</article>
				</div> <!-- page 3 -->
			</div>
			<div class="tm-section tm-container-inner">
				<div class="row">
					<div class="col-md-6">
						<figure class="tm-description-figure">
							<img src="https://www.haidilao.com/eportal/imageDir/haidilao/2019/07/2019071510242851988.png"
								alt="Image" class="img-fluid" />
						</figure>
						<span class="span1"></span>
					</div>
					<div class="col-md-6">
						<div class="tm-description-box">
							<h2 class="abouth2">海底捞核心价值观</h2>
							<p class="p-top">一个中心：双手改变命运</p>
							<p class="tm-mb-45">两个基本点：以顾客为中心，以“勤奋者”为本</p>
							<a href="about.html" class="tm-btn tm-btn-default tm-right">查看详情</a>
						</div>
					</div>
				</div>
				<div class="row" style="margin-top: 50px;">
					<div class="col-md-6">
						<span class="span1" style="left:500px"></span>
						<div class="tm-description-box">
							<h2 class="abouth2">海底捞使命</h2>
							<p class="p-top">通过精心挑选的产品和创新的服务，创造欢乐火锅时光</p>
							<p class="tm-mb-45">向世界各国美食爱好者传递健康火锅饮食文化</p>
							<a href="about.html" class="tm-btn tm-btn-default tm-left">查看详情</a>
						</div>
					</div>
					<div class="col-md-6">
						<figure class="tm-description-figure">
							<img src="https://www.haidilao.com/eportal/imageDir/haidilao/2019/07/2019071510241897727.png"
								alt="Image" class="img-fluid" />
						</figure>
					</div>
				</div>
				<div class="row" style="margin-top: 50px;">
					<div class="col-md-6">
						<figure class="tm-description-figure">
							<img src="https://www.haidilao.com/eportal/imageDir/haidilao/2019/07/2019071510235870279.png"
								alt="Image" class="img-fluid" />
						</figure>
						<span class="span1"></span>
					</div>
					<div class="col-md-6">
						<div class="tm-description-box">
							<h4 class="abouth2">海底捞核心价值观</h4>
							<p class="p-top">诚信、创新、谦虚、勤奋、激情、与人为善、责任感；</p>
							<p class="tm-mb-45">海底捞始终秉承“服务至上、顾客至上”的理念，以创新为核心，改变传统的标准化、单一化的服务，提倡个性化的特色服务，将用心服务作为基本理念，致力于为顾客提供“贴心、温心、舒心”的服务； 在管理上，倡导双手改变命运的价值观，为员工创建公平公正的工作环境，实施人性化和亲情化的管理模式，提升员工价值。</p>
							<a href="about.html" class="tm-btn tm-btn-default tm-right">查看详情</a>
						</div>
					</div>
				</div>
			</div>
		</main>
		<footer class="tm-footer text-center">
			<p>Copyright &copy; 2019.Just All rights reserved.</p>
		</footer>
	</div>
	<!-- <script src="js/parallax.min.js"></script> -->
	<script>
		$(document).ready(function () {
			var guodiImg = new Vue({
				el: '#tm-gallery-page-锅底',
				data: function () {
					return huoguo;
				},
			})
			var xiaochiImg = new Vue({
				el: '#tm-gallery-page-小吃甜品',
				data: function () {
					return xiaochi;
				},
			})
			var caiImg = new Vue({
				el: '#tm-gallery-page-涮菜',
				data: function () {
					return {
						cai,
						// 所有页面的数据
						totalPage: [],
						// 每页显示数量
						pageSize: 12,
						// 共几页
						pageNum: 1,
						// 当前显示的数据
						dataShow: "",
						// 默认当前显示第一页
						currentPage: 0
					};
				},
				methods: {
					ready: function () {
						// 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
						this.pageNum = Math.ceil(this.cai.shuancai.length / this.pageSize) || 1;
						console.log(this.cai.shuancai.length)
						for (let i = 0; i < this.pageNum; i++) {
							// 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
							// 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5(对slice操作来说是0-5)条，第二页是6-10(对slice操作来说是5-10)条...
							this.totalPage[i] = this.cai.shuancai.slice(this.pageSize * i, this.pageSize * (i + 1))
						}
						// 当前显示的内容
						this.dataShow = this.totalPage[this.currentPage];
					},
					// 上一页和下一页
					// 下一页
					nextPage: function () {
						if (this.currentPage == this.pageNum - 1) return;
						this.dataShow = this.totalPage[++this.currentPage];
					},
					// 上一页
					prePage: function () {
						if (this.currentPage == 0) return;
						this.dataShow = this.totalPage[--this.currentPage];
					},
					pickPage: function (e) {
						if (this.index <= 0) return;
						this.currentPage = e.currentTarget.text - 1;
						this.dataShow = this.totalPage[this.currentPage];
					}
				}
			})
			caiImg.ready();
			// 处理页面跳转
			$('.tm-paging-link').click(function (e) {
				e.preventDefault();
				var page = $(this).text();
				$('.tm-gallery-page').addClass('hidden');
				$('#tm-gallery-page-' + page).removeClass('hidden');
				$('.tm-paging-link').removeClass('active');
				$(this).addClass("active");
			});
		});
	</script>
</body>

</html>